import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { set as setToken } from '../store/token'
import { set as setUserInfo } from '../store/userInfo'
import { Button, Form, Input } from 'antd'
import useMessage from '../utils/message'
import { login } from '../api/user'
import logo from '../assets/logo.png'
import getEnv from '../utils/env'
import './login.scss'

export default function Login() {
  const nav = useNavigate()
  const dispatch = useDispatch()
  const message = useMessage()

  return (
    <div className="login">
      <div className="login-container">
        <div className="login-container-title">
          <img src={logo} alt="" className="logo" />
          <span className="title">{getEnv('name')}</span>
        </div>
        <Form
          onFinish={(values: unknown) => {
            login(values).then(({ data }) => {
              dispatch(setUserInfo(null))
              dispatch(setToken(data))
              nav('/')
            })
          }}
          initialValues={{
            phone: getEnv('login'),
            password: getEnv('password')
          }}
        >
          <Form.Item name="phone" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ width: '100%' }} size="large">
              登录
            </Button>
          </Form.Item>
        </Form>
        <div className="login-container-resetPassword">
          <Button type="link" onClick={() => message.success('还没做这个功能！！！')}>
            忘记密码
          </Button>
        </div>
      </div>
    </div>
  )
}
